/* 基本样式 */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f8f9fa;
}

.sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    padding: 48px 0 0;
    box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
}

.sidebar-heading {
    font-size: .75rem;
    text-transform: uppercase;
}

/* 服务列表样式 */
.server-item {
    cursor: pointer;
    margin: 5px 0;
    border-radius: 4px;
    padding: 8px 15px;
    transition: background-color 0.3s;
}

.server-item:hover {
    background-color: #e9ecef;
}

.server-item.active {
    background-color: #cfe2ff;
    color: #0d6efd;
    font-weight: bold;
}

.server-item.connected {
    color: #198754;
}

.server-item.disconnected {
    color: #6c757d;
}

/* 聊天区域样式 */
.chat-container {
    height: calc(100vh - 200px);
    overflow-y: auto;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 15px;
    background-color: white;
}

.message {
    margin-bottom: 15px;
    padding: 10px 15px;
    border-radius: 10px;
    max-width: 80%;
    position: relative;
}

.user-message {
    background-color: #e9ecef;
    align-self: flex-start;
    margin-right: auto;
}

.assistant-message {
    background-color: #cfe2ff;
    align-self: flex-end;
    margin-left: auto;
}

.message-content {
    word-wrap: break-word;
}

/* 工具调用样式 */
.tool-call {
    background-color: #d1e7dd;
    border-left: 4px solid #198754;
    padding: 8px 12px;
    margin: 8px 0;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.tool-call:hover {
    background-color: #c3e6cb;
}

/* 代码块样式 */
pre {
    background-color: #f6f8fa;
    border-radius: 4px;
    padding: 10px;
    overflow-x: auto;
}

code {
    font-family: 'Courier New', Courier, monospace;
}

/* 加载指示器 */
.loading {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    border-top-color: #0d6efd;
    animation: spin 1s ease-in-out infinite;
    margin-left: 10px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* 工具调用详情 */
.tool-details {
    background-color: #f8f9fa;
    border-radius: 4px;
    padding: 10px;
    margin-top: 10px;
}

.json-key {
    color: #0d6efd;
}

.json-string {
    color: #198754;
}

.json-number {
    color: #fd7e14;
}

.json-boolean {
    color: #dc3545;
}

.json-null {
    color: #6c757d;
}